<template>
  <view>
    <view class="u-p-24">
      <view class="top u-p-24">
        <view class="flex-row justify-between" style="height: 140rpx;">
          <view>
            <view class="u-m-b-8">可用余额(元)</view>
            <view style="font-size: 56rpx;">12345</view>
          </view>
          <view @click="$goto('/pages/mine/hongbao')">
            <view class="text-right u-m-b-8">预收入(元)</view>
            <view class="text-right">12345</view>
          </view>
        </view>

        <view class="flex-row justify-around align-center btns">
          <view>充值</view>
          <view @click="$goto('/pages/mine/yue-tixian')">提现</view>
        </view>
      </view>

      <u-gap height="24"></u-gap>
      <view class="tabs-wrap">
        <view class="tabs">
          <view class="tab f-center" :class="{ on: current == k }" v-for="(i, k) in tabs" :key="k" @click="toggle(k)">{{i}}</view>
          <view class="tab-bg" :style="{ transform: transform }"></view>
        </view>
      </view>

      <u-gap height="24"></u-gap>
      <view class="items">
        <view class="item" v-for="i in 4" :key="i">
          <view>
            <view class="price">+12.5</view>
            <view class="date">2019-11-11</view>
          </view>
          <view>
            分享返佣
          </view>
          <view>
            <text style="color: #f6ad3c;">详情</text>
            <u-icon name="play-right-fill" color="#f6ad3c"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: ['充值', '收入', '支出'],
        current: 0,
        transform: ''
      };
    },
    onLoad() {
      this.toggle(0)
    },
    methods: {
      toggle(k) {
        this.current = k
        this.transform = `translateX(${k * 100}%)`
      }
    }
  }
</script>

<style lang="scss">
  .top {
    width: 702rpx;
    height: 260rpx;
    border-radius: 24rpx;
    background: url(../../static/images/yue-bg.png) center / cover;
    color: #fff;

    .btns {
      height: 80rpx;
      position: relative;

      &::after {
        content: '';
        width: 4rpx;
        height: 36rpx;
        border-radius: 4rpx;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .tabs-wrap {
    padding: 8rpx;
    border-radius: 8rpx;
    background: #f6ad3c;
  }

  .tabs {
    width: 686rpx;
    height: 72rpx;
    display: flex;
    position: relative;

    .tab {
      color: #fff;
      width: 33.33%;
      height: 100%;
      transition: all 0.3s;
      position: relative;
      z-index: 9;
    }

    .on {
      color: #f6ad3c;
    }

    .tab-bg {
      position: absolute;
      width: 33.33%;
      height: 100%;
      background: #fff;
      transition: all 0.3s;
      border-radius: 8rpx;
      z-index: 8;
    }
  }

  .items {
    width: 100%;
    background: #fff;
    border-radius: 24rpx;
    padding: 0 24rpx 24rpx 24rpx;

    .item {
      width: 100%;
      height: 100rpx;
      border-bottom: 1px solid #EFEFEF;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        color: #FF4E4E;
        font-size: 30rpx;
      }

      .date {
        color: #C3C3C3;
        font-size: 22rpx;
      }
    }
  }
</style>
